/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

import React from 'react';

import styles from './styles.module.css';

function Devices() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      width={1107}
      height={288}
      fill="none"
      className={styles.svgContent}>
      <g filter="url(#a)" className={styles.largeFormatDevices}>
        <path
          fill="var(--home-hero-devices-background)"
          d="M772.117 21.578c0-8.542 6.925-15.466 15.466-15.466h287.667c8.54 0 15.47 6.924 15.47 15.466v208.015c0 8.542-6.93 15.466-15.47 15.466H787.583c-8.541 0-15.466-6.924-15.466-15.466V21.578Z"
        />
        <path
          stroke="var(--home-hero-devices-border)"
          strokeWidth={6.92}
          d="M787.583 9.572h287.667c6.63 0 12.01 5.375 12.01 12.006v208.015c0 6.631-5.38 12.006-12.01 12.006H787.583c-6.631 0-12.006-5.375-12.006-12.006V21.578c0-6.63 5.375-12.006 12.006-12.006Z"
        />
      </g>
      <g className={styles.largeFormatDevices}>
        <rect
          width={160.853}
          height={107.235}
          x={796.212}
          y={31.259}
          fill="var(--home-hero-devices-skeleton-element)"
          rx={6}
        />
        <rect
          width={79.846}
          height={58.097}
          x={796.381}
          y={156.499}
          fill="var(--home-hero-devices-skeleton-element)"
          rx={6}
        />
        <rect
          width={79.846}
          height={58.097}
          x={891.226}
          y={156.499}
          fill="var(--home-hero-devices-skeleton-element)"
          rx={6}
        />
        <rect
          width={79.846}
          height={58.097}
          x={986.072}
          y={156.499}
          fill="var(--home-hero-devices-skeleton-element)"
          rx={6}
        />
        <rect
          width={92.811}
          height={25.332}
          x={970.56}
          y={31.259}
          fill="var(--home-hero-devices-skeleton-element)"
          rx={6}
        />
        <rect
          width={92.811}
          height={11.666}
          x={970.56}
          y={61.591}
          fill="var(--home-hero-devices-skeleton-element)"
          rx={5.833}
        />
        <rect
          width={67.837}
          height={11.666}
          x={970.56}
          y={78.257}
          fill="var(--home-hero-devices-skeleton-element)"
          rx={5.833}
        />
        <g filter="url(#b)">
          <rect
            width={60}
            height={60}
            x={833.416}
            y={220.526}
            fill="var(--home-hero-devices-background)"
            rx={15}
          />
          <rect
            width={59.5}
            height={59.5}
            x={833.666}
            y={220.776}
            stroke="var(--home-hero-devices-icon-border)"
            strokeWidth={0.5}
            rx={14.75}
          />
        </g>
        <g className={styles.largeFormatDevices}>
          <path
            fill="var(--home-hero-devices-background)"
            d="M863.416 259.427a8.905 8.905 0 1 0 0-17.81 8.905 8.905 0 0 0 0 17.81Z"
          />
          <path
            fill="url(#d)"
            d="M863.416 241.621h15.421a17.797 17.797 0 0 0-15.422-8.905 17.808 17.808 0 0 0-15.422 8.907l7.711 13.356.007-.002a8.901 8.901 0 0 1-.01-8.906 8.888 8.888 0 0 1 7.715-4.45Z"
          />
          <path
            fill="#1A73E8"
            d="M863.416 257.576a7.05 7.05 0 1 0 0-14.1 7.05 7.05 0 0 0 0 14.1Z"
          />
          <path
            fill="url(#e)"
            d="m871.127 254.981-7.711 13.355a17.8 17.8 0 0 0 15.423-8.904 17.807 17.807 0 0 0-.003-17.808h-15.422l-.001.006a8.898 8.898 0 0 1 8.911 8.898 8.902 8.902 0 0 1-1.197 4.453Z"
          />
          <path
            fill="url(#f)"
            d="m855.705 254.981-7.711-13.355a17.808 17.808 0 0 0-.001 17.809 17.805 17.805 0 0 0 15.425 8.901l7.71-13.355-.005-.005a8.888 8.888 0 0 1-7.707 4.462 8.895 8.895 0 0 1-7.711-4.457Z"
          />
        </g>
      </g>
      <g filter="url(#g)" className={styles.largeFormatDevices}>
        <rect
          width={60}
          height={60}
          x={901.416}
          y={220.526}
          fill="var(--home-hero-devices-background)"
          rx={15}
        />
        <rect
          width={59.5}
          height={59.5}
          x={901.666}
          y={220.776}
          stroke="var(--home-hero-devices-icon-border)"
          strokeWidth={0.5}
          rx={14.75}
        />
        <path
          fill="url(#h)"
          d="M948.781 243.158c-.814-1.959-2.466-4.074-3.76-4.743a19.443 19.443 0 0 1 1.898 5.688l.004.031c-2.119-5.282-5.712-7.412-8.646-12.049a23.04 23.04 0 0 1-.442-.718 5.954 5.954 0 0 1-.206-.387 3.41 3.41 0 0 1-.28-.742.047.047 0 0 0-.012-.032.045.045 0 0 0-.03-.016.056.056 0 0 0-.036 0l-.009.005-.013.007.007-.012c-4.707 2.756-6.304 7.858-6.451 10.41a9.379 9.379 0 0 0-5.157 1.987 5.724 5.724 0 0 0-.483-.366 8.681 8.681 0 0 1-.053-4.58 13.864 13.864 0 0 0-4.511 3.486h-.008c-.743-.942-.691-4.046-.648-4.694-.22.088-.43.2-.626.332-.655.468-1.268.993-1.831 1.569a16.37 16.37 0 0 0-1.752 2.102v.003-.004a15.825 15.825 0 0 0-2.514 5.678l-.025.124c-.07.389-.131.779-.185 1.17 0 .014-.003.027-.004.041a17.81 17.81 0 0 0-.304 2.583v.097a18.74 18.74 0 0 0 37.207 3.169c.032-.242.057-.481.085-.725a19.28 19.28 0 0 0-1.215-9.414Zm-21.598 14.669c.087.042.169.087.259.127l.013.009a9.848 9.848 0 0 1-.272-.136Zm19.741-13.688v-.018l.003.02-.003-.002Z"
        />
        <path
          fill="url(#i)"
          d="M948.781 243.158c-.815-1.959-2.466-4.074-3.76-4.743a19.443 19.443 0 0 1 1.898 5.688v.018l.003.02a16.965 16.965 0 0 1-.583 12.647c-2.147 4.609-7.346 9.332-15.484 9.102-8.792-.249-16.536-6.773-17.983-15.319-.264-1.347 0-2.03.132-3.126-.18.851-.281 1.717-.301 2.586v.097a18.74 18.74 0 0 0 37.207 3.169c.032-.242.058-.481.086-.726a19.265 19.265 0 0 0-1.216-9.413h.001Z"
        />
        <path
          fill="url(#j)"
          d="M948.781 243.158c-.815-1.959-2.466-4.074-3.76-4.743a19.443 19.443 0 0 1 1.898 5.688v.018l.003.02a16.965 16.965 0 0 1-.583 12.647c-2.147 4.609-7.346 9.332-15.484 9.102-8.792-.249-16.536-6.773-17.983-15.319-.264-1.347 0-2.03.132-3.126-.18.851-.281 1.717-.301 2.586v.097a18.74 18.74 0 0 0 37.207 3.169c.032-.242.058-.481.086-.726a19.265 19.265 0 0 0-1.216-9.413h.001Z"
        />
        <path
          fill="url(#k)"
          d="M939.676 245.361c.04.028.078.057.116.085a10.187 10.187 0 0 0-1.74-2.27c-5.825-5.825-1.527-12.631-.802-12.976l.007-.011c-4.706 2.756-6.304 7.858-6.45 10.41.218-.015.435-.033.658-.033a9.459 9.459 0 0 1 8.211 4.795Z"
        />
        <path
          fill="url(#l)"
          d="M931.477 246.524c-.031.466-1.678 2.074-2.254 2.074-5.328 0-6.193 3.223-6.193 3.223.235 2.715 2.127 4.951 4.413 6.133.105.054.211.103.317.151.183.081.366.156.55.225a8.311 8.311 0 0 0 2.438.471c9.34.438 11.149-11.169 4.409-14.537 1.59-.207 3.2.184 4.519 1.097a9.461 9.461 0 0 0-8.211-4.795c-.223 0-.44.018-.659.033a9.38 9.38 0 0 0-5.157 1.988c.286.242.608.565 1.288 1.234 1.271 1.253 4.533 2.551 4.54 2.703Z"
        />
        <path
          fill="url(#m)"
          d="M931.477 246.524c-.031.466-1.678 2.074-2.254 2.074-5.328 0-6.193 3.223-6.193 3.223.235 2.715 2.127 4.951 4.413 6.133.105.054.211.103.317.151.183.081.366.156.55.225a8.311 8.311 0 0 0 2.438.471c9.34.438 11.149-11.169 4.409-14.537 1.59-.207 3.2.184 4.519 1.097a9.461 9.461 0 0 0-8.211-4.795c-.223 0-.44.018-.659.033a9.38 9.38 0 0 0-5.157 1.988c.286.242.608.565 1.288 1.234 1.271 1.253 4.533 2.551 4.54 2.703Z"
        />
        <path
          fill="url(#n)"
          d="M924.776 241.964c.152.096.277.18.387.256a8.681 8.681 0 0 1-.053-4.58 13.891 13.891 0 0 0-4.511 3.486c.092-.002 2.81-.051 4.177.838Z"
        />
        <path
          fill="url(#o)"
          d="M912.876 250.571c1.446 8.545 9.191 15.07 17.983 15.319 8.138.23 13.336-4.494 15.484-9.102a16.972 16.972 0 0 0 .584-12.648v-.018c0-.014-.003-.022 0-.018l.003.032c.665 4.341-1.543 8.545-4.994 11.389l-.011.024c-6.724 5.477-13.16 3.304-14.462 2.417a8.623 8.623 0 0 1-.273-.135c-3.921-1.874-5.541-5.447-5.193-8.51a4.817 4.817 0 0 1-4.439-2.792 7.066 7.066 0 0 1 6.889-.277 9.33 9.33 0 0 0 7.036.277c-.007-.153-3.268-1.451-4.54-2.703-.679-.67-1.002-.992-1.287-1.235a5.74 5.74 0 0 0-.484-.366 24.102 24.102 0 0 0-.387-.257c-1.367-.888-4.085-.84-4.175-.837h-.008c-.743-.942-.691-4.046-.648-4.694-.22.088-.43.2-.626.332-.656.468-1.269.993-1.832 1.569a16.473 16.473 0 0 0-1.759 2.097v.003-.003a15.837 15.837 0 0 0-2.514 5.677c-.009.038-.675 2.949-.346 4.459h-.001Z"
        />
        <path
          fill="url(#p)"
          d="M938.053 243.177c.684.672 1.27 1.437 1.74 2.272.103.078.2.155.281.23 4.249 3.917 2.023 9.453 1.857 9.847 3.451-2.844 5.657-7.049 4.994-11.389-2.12-5.285-5.712-7.414-8.647-12.052a23.04 23.04 0 0 1-.442-.718 5.954 5.954 0 0 1-.206-.387 3.372 3.372 0 0 1-.28-.742.043.043 0 0 0-.012-.032.043.043 0 0 0-.03-.016.07.07 0 0 0-.035 0c-.003 0-.007.004-.01.005-.002.001-.009.006-.013.007-.725.344-5.022 7.149.803 12.975Z"
        />
        <path
          fill="url(#q)"
          d="M940.071 245.677a3.92 3.92 0 0 0-.281-.231c-.038-.028-.076-.057-.116-.085a6.469 6.469 0 0 0-4.519-1.097c6.74 3.37 4.932 14.975-4.409 14.537a8.324 8.324 0 0 1-2.438-.471 9.086 9.086 0 0 1-.866-.376l.013.009c1.302.889 7.736 3.061 14.462-2.418l.011-.024c.168-.392 2.394-5.929-1.857-9.844Z"
        />
        <path
          fill="url(#r)"
          d="M923.03 251.822s.865-3.224 6.194-3.224c.576 0 2.224-1.607 2.253-2.074a9.33 9.33 0 0 1-7.036-.276 7.072 7.072 0 0 0-6.889.276 4.812 4.812 0 0 0 4.439 2.793c-.347 3.064 1.272 6.636 5.193 8.509.088.042.17.088.26.128-2.289-1.182-4.178-3.418-4.414-6.132Z"
        />
        <path
          fill="url(#s)"
          d="M948.781 243.158c-.814-1.959-2.466-4.074-3.759-4.743a19.47 19.47 0 0 1 1.897 5.688l.004.031c-2.119-5.282-5.712-7.412-8.646-12.049a23.04 23.04 0 0 1-.442-.718 5.954 5.954 0 0 1-.206-.387 3.41 3.41 0 0 1-.28-.742.043.043 0 0 0-.012-.032.045.045 0 0 0-.03-.016.053.053 0 0 0-.035 0c-.003 0-.007.004-.01.005l-.013.007.007-.012c-4.707 2.756-6.304 7.858-6.451 10.41.219-.015.435-.034.659-.034a9.462 9.462 0 0 1 8.211 4.795 6.47 6.47 0 0 0-4.519-1.097c6.74 3.37 4.932 14.975-4.409 14.537a8.31 8.31 0 0 1-2.438-.47 10.25 10.25 0 0 1-.55-.225c-.106-.049-.212-.097-.317-.151l.013.008a11.489 11.489 0 0 1-.272-.136c.087.042.169.088.259.128-2.288-1.183-4.178-3.419-4.413-6.133 0 0 .865-3.224 6.193-3.224.576 0 2.225-1.607 2.254-2.074-.007-.152-3.268-1.45-4.54-2.702-.679-.67-1.002-.992-1.287-1.235a5.533 5.533 0 0 0-.484-.366 8.692 8.692 0 0 1-.053-4.58 13.87 13.87 0 0 0-4.51 3.486h-.009c-.742-.942-.69-4.046-.648-4.694a3.313 3.313 0 0 0-.625.332c-.656.468-1.269.993-1.832 1.569a16.396 16.396 0 0 0-1.752 2.102v.003-.004a15.842 15.842 0 0 0-2.514 5.678l-.025.124a33.189 33.189 0 0 0-.216 1.182 21.803 21.803 0 0 0-.277 2.612v.097a18.741 18.741 0 0 0 37.208 3.169c.031-.242.057-.481.085-.725a19.269 19.269 0 0 0-1.216-9.414Z"
        />
      </g>
      <g filter="url(#t)" className={styles.largeFormatDevices}>
        <rect
          width={60}
          height={60}
          x={969.416}
          y={220.526}
          fill="var(--home-hero-devices-background)"
          rx={15}
        />
        <rect
          width={59.5}
          height={59.5}
          x={969.666}
          y={220.776}
          stroke="var(--home-hero-devices-icon-border)"
          strokeWidth={0.5}
          rx={14.75}
        />
        <path
          fill="url(#u)"
          d="M999.416 268.075c9.694 0 17.544-7.857 17.544-17.549 0-9.691-7.85-17.548-17.544-17.548-9.692 0-17.548 7.857-17.548 17.548 0 9.692 7.856 17.549 17.548 17.549Z"
        />
        <path
          stroke="var(--home-hero-devices-background)"
          strokeLinecap="square"
          strokeWidth={0.338}
          d="M999.417 266.519v-2.694m0-26.61v-2.694m-2.786 31.764.468-2.654m4.621-26.204.47-2.654m-8.247 30.785.922-2.532m9.105-25.004.92-2.532m-13.486 28.902 1.347-2.334m13.309-23.044 1.34-2.333m-18.253 26.104 1.732-2.064m17.101-20.384 1.73-2.064m-22.567 22.533 2.064-1.732m20.383-17.104 2.06-1.732m-26.096 18.278 2.334-1.347m23.042-13.305 2.34-1.347M984.355 256l2.533-.921m25.002-9.101 2.53-.922m-30.77 8.266 2.654-.468m26.206-4.621 2.65-.468m-31.737 2.762h2.695m26.612 0h2.69m-31.763-2.768 2.654.468m26.209 4.621 2.65.468m-30.786-8.255 2.532.921m25.004 9.101 2.53.922m-28.902-13.459 2.334 1.347m23.048 13.305 2.33 1.347m-26.112-18.312 2.064 1.732m20.388 17.103 2.06 1.732m-22.547-22.525 1.732 2.064m17.105 20.384 1.73 2.064m-18.273-26.118 1.347 2.334m13.306 23.044 1.35 2.333m-13.466-28.89.922 2.533m9.104 25.004.92 2.532m-8.269-30.765.468 2.654m4.621 26.204.47 2.654m-4.166.155.117-1.343m2.559-29.191.11-1.343m-5.52 31.412.348-1.301m7.582-28.305.35-1.301m-10.915 29.927.57-1.221m12.385-26.558.57-1.221m-15.936 27.622.773-1.104m16.803-24.004.78-1.103m-20.478 24.414.953-.953m20.725-20.721.95-.952m-24.429 20.505 1.104-.773m24.005-16.808 1.1-.773m-27.6 15.927 1.221-.569m26.559-12.385 1.22-.569m-29.962 10.908 1.301-.348m28.301-7.585 1.31-.348m-31.407 5.528 1.342-.117m29.195-2.554 1.34-.118m-31.865 0 1.342.117m29.193 2.554 1.34.118m-31.412-5.524 1.301.349m28.301 7.584 1.31.349m-29.942-10.92 1.221.569m26.561 12.385 1.22.569m-27.605-15.921 1.104.773m24.001 16.808 1.11.772m-24.409-20.494.953.953m20.716 20.72.96.953m-20.523-24.432.773 1.104m16.81 24.004.77 1.104m-15.917-27.591.57 1.221m12.387 26.558.57 1.221m-10.916-29.948.349 1.301m7.587 28.305.35 1.301m-5.55-31.4.117 1.343m2.553 29.191.12 1.343"
        />
        <path
          fill="white"
          fillRule="evenodd"
          d="m1011.87 240.105-13.845 8.858-11.082 12.025 13.907-8.656 11.02-12.227Z"
          clipRule="evenodd"
        />
        <path
          fill="#FF3B30"
          fillRule="evenodd"
          d="m1011.87 240.105-13.845 8.858 2.825 3.369 11.02-12.227Z"
          clipRule="evenodd"
        />
      </g>
      <g filter="url(#v)">
        <rect
          width={115.27}
          height={241.645}
          x={607.87}
          y={4.173}
          fill="var(--home-hero-devices-background)"
          stroke="var(--home-hero-devices-border)"
          strokeWidth={6.92}
          rx={18.966}
        />
        <rect
          width={90.043}
          height={29.538}
          x={620.484}
          y={49.475}
          fill="var(--home-hero-devices-skeleton-element)"
          rx={6}
        />
        <rect
          width={90.043}
          height={29.538}
          x={620.484}
          y={87.013}
          fill="var(--home-hero-devices-skeleton-element)"
          rx={6}
        />
        <rect
          width={90.043}
          height={63.547}
          x={620.484}
          y={124.552}
          fill="var(--home-hero-devices-skeleton-element)"
          rx={6}
        />
        <rect
          width={40.985}
          height={11.599}
          x={645.008}
          y={17.339}
          fill="var(--home-hero-devices-border)"
          stroke="var(--home-hero-devices-border)"
          strokeWidth={0.773}
          rx={5.8}
        />
      </g>
      <g filter="url(#w)">
        <rect
          width={60}
          height={60}
          x={635.5}
          y={221.051}
          fill="var(--home-hero-devices-background)"
          rx={15}
        />
        <rect
          width={59.5}
          height={59.5}
          x={635.75}
          y={221.301}
          stroke="var(--home-hero-devices-icon-border)"
          strokeWidth={0.5}
          rx={14.75}
        />
        <path
          fill="var(--home-hero-devices-icon)"
          d="M678.762 243.797c-.205.158-3.811 2.19-3.811 6.709 0 5.226 4.589 7.075 4.726 7.121-.021.113-.729 2.532-2.419 4.997-1.508 2.17-3.082 4.336-5.477 4.336-2.395 0-3.011-1.391-5.776-1.391-2.694 0-3.652 1.437-5.842 1.437-2.191 0-3.719-2.008-5.477-4.473-2.036-2.895-3.68-7.393-3.68-11.661 0-6.847 4.451-10.478 8.833-10.478 2.328 0 4.268 1.529 5.73 1.529 1.391 0 3.56-1.62 6.209-1.62 1.003 0 4.61.091 6.984 3.494Zm-8.242-6.393c1.096-1.299 1.871-3.102 1.871-4.906 0-.25-.022-.503-.067-.707-1.782.066-3.903 1.186-5.181 2.669-1.004 1.141-1.941 2.944-1.941 4.772 0 .275.046.55.067.638.113.021.296.045.479.045 1.599 0 3.61-1.07 4.772-2.511Z"
        />
      </g>
      <g filter="url(#x)">
        <rect
          width={124.957}
          height={240.962}
          x={425.347}
          y={5.105}
          fill="var(--home-hero-devices-background)"
          stroke="var(--home-hero-devices-border)"
          strokeWidth={6.92}
          rx={5.82}
        />
        <rect
          width={100.149}
          height={29.538}
          x={437.751}
          y={50.475}
          fill="var(--home-hero-devices-skeleton-element)"
          rx={6}
        />
        <rect
          width={100.149}
          height={29.538}
          x={437.751}
          y={88.013}
          fill="var(--home-hero-devices-skeleton-element)"
          rx={6}
        />
        <rect
          width={100.149}
          height={63.547}
          x={437.751}
          y={125.552}
          fill="var(--home-hero-devices-skeleton-element)"
          rx={6}
        />
        <circle
          cx={487.862}
          cy={23.139}
          r={5.8}
          fill="var(--home-hero-devices-border)"
          stroke="var(--home-hero-devices-border)"
          strokeWidth={0.773}
        />
      </g>
      <g filter="url(#y)">
        <rect
          width={60}
          height={60}
          x={457.862}
          y={222.083}
          fill="var(--home-hero-devices-background)"
          rx={15}
        />
        <rect
          width={59.5}
          height={59.5}
          x={458.112}
          y={222.333}
          stroke="var(--home-hero-devices-icon-border)"
          strokeWidth={0.5}
          rx={14.75}
        />
        <path
          fill="var(--home-hero-devices-icon)"
          d="M471.783 262.526c-1.285 0-2.606 1.032-2.606 2.836 0 1.655 1.162 2.819 2.606 2.819 1.193 0 1.724-.803 1.724-.803v.348a.37.37 0 0 0 .349.35h.861v-5.432h-1.21v.69s-.536-.808-1.724-.808Zm.216 1.111c1.057 0 1.613.932 1.613 1.728 0 .886-.659 1.727-1.611 1.727-.795 0-1.592-.645-1.592-1.739 0-.99.685-1.719 1.59-1.719v.003Zm4.401 4.443a.347.347 0 0 1-.249-.099.34.34 0 0 1-.1-.251v-5.086h1.212v.673c.274-.414.809-.797 1.632-.797 1.345 0 2.063 1.074 2.063 2.079v3.481h-.843a.375.375 0 0 1-.37-.37v-2.842c0-.556-.34-1.233-1.127-1.233-.85 0-1.356.805-1.356 1.562v2.883h-.862Zm8.086-5.554c-1.285 0-2.607 1.032-2.607 2.836 0 1.655 1.162 2.819 2.607 2.819 1.195 0 1.725-.803 1.725-.803v.348a.37.37 0 0 0 .349.35h.862v-8.144h-1.211v3.404s-.537-.81-1.725-.81Zm.216 1.111c1.057 0 1.612.932 1.612 1.728 0 .886-.659 1.727-1.611 1.727-.795 0-1.591-.645-1.591-1.739-.001-.99.683-1.719 1.59-1.719v.003Zm4.401 4.443a.347.347 0 0 1-.249-.099.34.34 0 0 1-.099-.251v-5.086h1.21v.905c.209-.507.658-.966 1.458-.966.144.001.288.015.43.041v1.255a1.702 1.702 0 0 0-.574-.103c-.85 0-1.314.804-1.314 1.563v2.741h-.862Zm10.097 0a.337.337 0 0 1-.349-.35v-5.086h1.212v5.436h-.863Zm4.412-5.554c-1.285 0-2.606 1.032-2.606 2.836 0 1.655 1.162 2.819 2.606 2.819 1.192 0 1.724-.803 1.724-.803v.348a.37.37 0 0 0 .349.35h.862v-8.144h-1.211v3.404s-.536-.81-1.724-.81Zm.216 1.111c1.06 0 1.612.932 1.612 1.728 0 .886-.659 1.727-1.61 1.727-.796 0-1.591-.645-1.591-1.739-.001-.99.684-1.719 1.589-1.719v.003Zm-4.381-2.162a.802.802 0 1 0-.002-1.604.802.802 0 0 0 .002 1.604Zm-4.401 1.046c-1.345 0-2.823 1.009-2.823 2.832 0 1.662 1.259 2.828 2.821 2.828 1.925 0 2.865-1.551 2.865-2.818a2.817 2.817 0 0 0-2.862-2.842h-.001Zm.004 1.134c.931 0 1.625.752 1.625 1.701 0 .966-.736 1.713-1.622 1.713-.821 0-1.62-.67-1.62-1.694 0-1.042.76-1.718 1.617-1.718v-.002Z"
        />
        <path
          fill="#32DE84"
          d="m496.982 241.807 3.098-5.379a.631.631 0 0 0-.702-.925.623.623 0 0 0-.38.293l-3.138 5.449c-2.394-1.097-5.089-1.708-7.988-1.708s-5.594.611-7.989 1.708l-3.138-5.449a.628.628 0 1 0-1.084.632l3.097 5.379c-5.342 2.902-8.959 8.322-9.557 14.667h37.346c-.6-6.345-4.219-11.765-9.565-14.667Zm-17.683 9.41a1.57 1.57 0 1 1 .599-3.019 1.57 1.57 0 0 1-.6 3.019h.001Zm17.144 0a1.565 1.565 0 0 1-1.536-1.876 1.574 1.574 0 0 1 1.231-1.233 1.564 1.564 0 0 1 1.607.668 1.573 1.573 0 0 1-1.303 2.441h.001Z"
        />
      </g>
      <g
        stroke="var(--home-hero-devices-border)"
        filter="url(#z)"
        className={styles.largeFormatDevices}>
        <path
          fill="var(--home-hero-devices-background)"
          strokeWidth={6.918}
          d="M72.117 11.34h255.95c6.112 0 11.068 4.955 11.068 11.068v167.405H61.049V22.408c0-6.113 4.955-11.068 11.068-11.068Z"
        />
        <path
          fill="url(#A)"
          strokeWidth={0.692}
          d="m17.814 233.048 40.122-40.122h284.658l40.121 40.122H17.814Z"
        />
        <path
          fill="var(--home-hero-devices-border)"
          strokeWidth={0.692}
          d="M17.346 233.729h365.849v8.647a5.88 5.88 0 0 1-5.88 5.88H23.225a5.88 5.88 0 0 1-5.88-5.88v-8.647Z"
        />
      </g>
      <g className={styles.largeFormatDevices}>
        <rect
          width={156.853}
          height={103.235}
          x={84.838}
          y={61.281}
          fill="var(--home-hero-devices-background)"
          stroke="var(--home-hero-devices-skeleton-element)"
          strokeWidth={4}
          rx={4}
        />
        <rect
          width={160.853}
          height={107.235}
          x={149.265}
          y={35.259}
          fill="var(--home-hero-devices-skeleton-element)"
          rx={6}
        />
        <g filter="url(#B)">
          <rect
            width={60}
            height={60}
            x={209.521}
            y={222.826}
            fill="var(--home-hero-devices-background)"
            rx={15}
          />
          <rect
            width={59.5}
            height={59.5}
            x={209.771}
            y={223.076}
            stroke="var(--home-hero-devices-icon-border)"
            strokeWidth={0.5}
            rx={14.75}
          />
          <path fill="#E15F38" d="M222.961 236.265h15.786v15.786h-15.786z" />
          <path fill="#8EBB3B" d="M240.296 236.265h15.786v15.786h-15.786z" />
          <path fill="#F5BD45" d="M240.296 253.601h15.786v15.786h-15.786z" />
          <path fill="#4BA4EA" d="M222.961 253.601h15.786v15.786h-15.786z" />
        </g>
        <g filter="url(#C)">
          <rect
            width={60.513}
            height={60.513}
            x={141.008}
            y={222.826}
            fill="var(--home-hero-devices-background)"
            rx={15}
            shapeRendering="crispEdges"
          />
          <rect
            width={59.513}
            height={59.513}
            x={141.508}
            y={223.326}
            stroke="var(--home-hero-devices-icon-border)"
            rx={14.5}
            shapeRendering="crispEdges"
          />
          <path fill="url(#D)" d="M149.008 230.826h44.513v44.513h-44.513z" />
        </g>
      </g>
      <defs>
        <filter
          id="a"
          width={350.598}
          height={270.947}
          x={756.117}
          y={6.112}
          colorInterpolationFilters="sRGB"
          filterUnits="userSpaceOnUse">
          <feFlood floodOpacity={0} result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feMorphology
            in="SourceAlpha"
            radius={16}
            result="effect1_dropShadow_490_198"
          />
          <feOffset dy={16} />
          <feGaussianBlur stdDeviation={16} />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
          <feBlend
            in2="BackgroundImageFix"
            result="effect1_dropShadow_490_198"
          />
          <feBlend
            in="SourceGraphic"
            in2="effect1_dropShadow_490_198"
            result="shape"
          />
        </filter>
        <filter
          id="b"
          width={66}
          height={66}
          x={830.416}
          y={218.526}
          colorInterpolationFilters="sRGB"
          filterUnits="userSpaceOnUse">
          <feFlood floodOpacity={0} result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feOffset dy={1} />
          <feGaussianBlur stdDeviation={1.5} />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0" />
          <feBlend
            in2="BackgroundImageFix"
            result="effect1_dropShadow_490_198"
          />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feOffset dy={1} />
          <feGaussianBlur stdDeviation={1} />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
          <feBlend
            in2="effect1_dropShadow_490_198"
            result="effect2_dropShadow_490_198"
          />
          <feBlend
            in="SourceGraphic"
            in2="effect2_dropShadow_490_198"
            result="shape"
          />
        </filter>
        <filter
          id="g"
          width={66}
          height={66}
          x={898.416}
          y={218.526}
          colorInterpolationFilters="sRGB"
          filterUnits="userSpaceOnUse">
          <feFlood floodOpacity={0} result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feOffset dy={1} />
          <feGaussianBlur stdDeviation={1.5} />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0" />
          <feBlend
            in2="BackgroundImageFix"
            result="effect1_dropShadow_490_198"
          />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feOffset dy={1} />
          <feGaussianBlur stdDeviation={1} />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
          <feBlend
            in2="effect1_dropShadow_490_198"
            result="effect2_dropShadow_490_198"
          />
          <feBlend
            in="SourceGraphic"
            in2="effect2_dropShadow_490_198"
            result="shape"
          />
        </filter>
        <filter
          id="t"
          width={66}
          height={66}
          x={966.416}
          y={218.526}
          colorInterpolationFilters="sRGB"
          filterUnits="userSpaceOnUse">
          <feFlood floodOpacity={0} result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feOffset dy={1} />
          <feGaussianBlur stdDeviation={1.5} />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0" />
          <feBlend
            in2="BackgroundImageFix"
            result="effect1_dropShadow_490_198"
          />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feOffset dy={1} />
          <feGaussianBlur stdDeviation={1} />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
          <feBlend
            in2="effect1_dropShadow_490_198"
            result="effect2_dropShadow_490_198"
          />
          <feBlend
            in="SourceGraphic"
            in2="effect2_dropShadow_490_198"
            result="shape"
          />
        </filter>
        <filter
          id="v"
          width={154.19}
          height={280.565}
          x={588.41}
          y={0.713}
          colorInterpolationFilters="sRGB"
          filterUnits="userSpaceOnUse">
          <feFlood floodOpacity={0} result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feMorphology
            in="SourceAlpha"
            radius={16}
            result="effect1_dropShadow_490_198"
          />
          <feOffset dy={16} />
          <feGaussianBlur stdDeviation={16} />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
          <feBlend
            in2="BackgroundImageFix"
            result="effect1_dropShadow_490_198"
          />
          <feBlend
            in="SourceGraphic"
            in2="effect1_dropShadow_490_198"
            result="shape"
          />
        </filter>
        <filter
          id="w"
          width={66}
          height={66}
          x={632.5}
          y={219.051}
          colorInterpolationFilters="sRGB"
          filterUnits="userSpaceOnUse">
          <feFlood floodOpacity={0} result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feOffset dy={1} />
          <feGaussianBlur stdDeviation={1.5} />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0" />
          <feBlend
            in2="BackgroundImageFix"
            result="effect1_dropShadow_490_198"
          />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feOffset dy={1} />
          <feGaussianBlur stdDeviation={1} />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
          <feBlend
            in2="effect1_dropShadow_490_198"
            result="effect2_dropShadow_490_198"
          />
          <feBlend
            in="SourceGraphic"
            in2="effect2_dropShadow_490_198"
            result="shape"
          />
        </filter>
        <filter
          id="x"
          width={163.877}
          height={279.882}
          x={405.887}
          y={1.645}
          colorInterpolationFilters="sRGB"
          filterUnits="userSpaceOnUse">
          <feFlood floodOpacity={0} result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feMorphology
            in="SourceAlpha"
            radius={16}
            result="effect1_dropShadow_490_198"
          />
          <feOffset dy={16} />
          <feGaussianBlur stdDeviation={16} />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
          <feBlend
            in2="BackgroundImageFix"
            result="effect1_dropShadow_490_198"
          />
          <feBlend
            in="SourceGraphic"
            in2="effect1_dropShadow_490_198"
            result="shape"
          />
        </filter>
        <filter
          id="y"
          width={66}
          height={66}
          x={454.862}
          y={220.083}
          colorInterpolationFilters="sRGB"
          filterUnits="userSpaceOnUse">
          <feFlood floodOpacity={0} result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feOffset dy={1} />
          <feGaussianBlur stdDeviation={1.5} />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0" />
          <feBlend
            in2="BackgroundImageFix"
            result="effect1_dropShadow_490_198"
          />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feOffset dy={1} />
          <feGaussianBlur stdDeviation={1} />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
          <feBlend
            in2="effect1_dropShadow_490_198"
            result="effect2_dropShadow_490_198"
          />
          <feBlend
            in="SourceGraphic"
            in2="effect2_dropShadow_490_198"
            result="shape"
          />
        </filter>
        <filter
          id="z"
          width={398.572}
          height={272.721}
          x={0.979}
          y={7.881}
          colorInterpolationFilters="sRGB"
          filterUnits="userSpaceOnUse">
          <feFlood floodOpacity={0} result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feMorphology
            in="SourceAlpha"
            radius={16}
            result="effect1_dropShadow_490_198"
          />
          <feOffset dy={16} />
          <feGaussianBlur stdDeviation={16} />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
          <feBlend
            in2="BackgroundImageFix"
            result="effect1_dropShadow_490_198"
          />
          <feBlend
            in="SourceGraphic"
            in2="effect1_dropShadow_490_198"
            result="shape"
          />
        </filter>
        <filter
          id="B"
          width={66}
          height={66}
          x={206.521}
          y={220.826}
          colorInterpolationFilters="sRGB"
          filterUnits="userSpaceOnUse">
          <feFlood floodOpacity={0} result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feOffset dy={1} />
          <feGaussianBlur stdDeviation={1.5} />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0" />
          <feBlend
            in2="BackgroundImageFix"
            result="effect1_dropShadow_490_198"
          />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feOffset dy={1} />
          <feGaussianBlur stdDeviation={1} />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
          <feBlend
            in2="effect1_dropShadow_490_198"
            result="effect2_dropShadow_490_198"
          />
          <feBlend
            in="SourceGraphic"
            in2="effect2_dropShadow_490_198"
            result="shape"
          />
        </filter>
        <filter
          id="C"
          width={66.513}
          height={66.513}
          x={138.008}
          y={220.826}
          colorInterpolationFilters="sRGB"
          filterUnits="userSpaceOnUse">
          <feFlood floodOpacity={0} result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feOffset dy={1} />
          <feGaussianBlur stdDeviation={1.5} />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0" />
          <feBlend
            in2="BackgroundImageFix"
            result="effect1_dropShadow_490_198"
          />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feOffset dy={1} />
          <feGaussianBlur stdDeviation={1} />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
          <feBlend
            in2="effect1_dropShadow_490_198"
            result="effect2_dropShadow_490_198"
          />
          <feBlend
            in="SourceGraphic"
            in2="effect2_dropShadow_490_198"
            result="shape"
          />
        </filter>
        <radialGradient
          id="i"
          cx={0}
          cy={0}
          r={1}
          gradientTransform="matrix(39.0656 0 0 39.066 944.864 234.478)"
          gradientUnits="userSpaceOnUse">
          <stop offset={0.129} stopColor="#FFBD4F" />
          <stop offset={0.186} stopColor="#FFAC31" />
          <stop offset={0.247} stopColor="#FF9D17" />
          <stop offset={0.283} stopColor="#FF980E" />
          <stop offset={0.403} stopColor="#FF563B" />
          <stop offset={0.467} stopColor="#FF3750" />
          <stop offset={0.71} stopColor="#F5156C" />
          <stop offset={0.782} stopColor="#EB0878" />
          <stop offset={0.86} stopColor="#E50080" />
        </radialGradient>
        <radialGradient
          id="j"
          cx={0}
          cy={0}
          r={1}
          gradientTransform="matrix(39.0656 0 0 39.066 930.589 250.449)"
          gradientUnits="userSpaceOnUse">
          <stop offset={0.3} stopColor="#960E18" />
          <stop offset={0.351} stopColor="#B11927" stopOpacity={0.74} />
          <stop offset={0.435} stopColor="#DB293D" stopOpacity={0.343} />
          <stop offset={0.497} stopColor="#F5334B" stopOpacity={0.094} />
          <stop offset={0.53} stopColor="#FF3750" stopOpacity={0} />
        </radialGradient>
        <radialGradient
          id="k"
          cx={0}
          cy={0}
          r={1}
          gradientTransform="translate(935.299 225.613) scale(28.3015)"
          gradientUnits="userSpaceOnUse">
          <stop offset={0.132} stopColor="#FFF44F" />
          <stop offset={0.252} stopColor="#FFDC3E" />
          <stop offset={0.506} stopColor="#FF9D12" />
          <stop offset={0.526} stopColor="#FF980E" />
        </radialGradient>
        <radialGradient
          id="l"
          cx={0}
          cy={0}
          r={1}
          gradientTransform="translate(926.268 260.653) scale(18.6011)"
          gradientUnits="userSpaceOnUse">
          <stop offset={0.353} stopColor="#3A8EE6" />
          <stop offset={0.472} stopColor="#5C79F0" />
          <stop offset={0.669} stopColor="#9059FF" />
          <stop offset={1} stopColor="#C139E6" />
        </radialGradient>
        <radialGradient
          id="m"
          cx={0}
          cy={0}
          r={1}
          gradientTransform="matrix(9.58605 -2.3177 2.7134 11.22274 932.724 247.248)"
          gradientUnits="userSpaceOnUse">
          <stop offset={0.206} stopColor="#9059FF" stopOpacity={0} />
          <stop offset={0.278} stopColor="#8C4FF3" stopOpacity={0.064} />
          <stop offset={0.747} stopColor="#7716A8" stopOpacity={0.45} />
          <stop offset={0.975} stopColor="#6E008B" stopOpacity={0.6} />
        </radialGradient>
        <radialGradient
          id="n"
          cx={0}
          cy={0}
          r={1}
          gradientTransform="translate(930.096 232.88) scale(13.3813)"
          gradientUnits="userSpaceOnUse">
          <stop stopColor="#FFE226" />
          <stop offset={0.121} stopColor="#FFDB27" />
          <stop offset={0.295} stopColor="#FFC82A" />
          <stop offset={0.502} stopColor="#FFA930" />
          <stop offset={0.732} stopColor="#FF7E37" />
          <stop offset={0.792} stopColor="#FF7139" />
        </radialGradient>
        <radialGradient
          id="o"
          cx={0}
          cy={0}
          r={1}
          gradientTransform="translate(940.614 224.392) scale(57.0915)"
          gradientUnits="userSpaceOnUse">
          <stop offset={0.113} stopColor="#FFF44F" />
          <stop offset={0.456} stopColor="#FF980E" />
          <stop offset={0.622} stopColor="#FF5634" />
          <stop offset={0.716} stopColor="#FF3647" />
          <stop offset={0.904} stopColor="#E31587" />
        </radialGradient>
        <radialGradient
          id="p"
          cx={0}
          cy={0}
          r={1}
          gradientTransform="rotate(83.976 341.478 633.66) scale(41.8447 27.4623)"
          gradientUnits="userSpaceOnUse">
          <stop stopColor="#FFF44F" />
          <stop offset={0.06} stopColor="#FFE847" />
          <stop offset={0.168} stopColor="#FFC830" />
          <stop offset={0.304} stopColor="#FF980E" />
          <stop offset={0.356} stopColor="#FF8B16" />
          <stop offset={0.455} stopColor="#FF672A" />
          <stop offset={0.57} stopColor="#FF3647" />
          <stop offset={0.737} stopColor="#E31587" />
        </radialGradient>
        <radialGradient
          id="q"
          cx={0}
          cy={0}
          r={1}
          gradientTransform="translate(929.781 237.836) scale(35.644)"
          gradientUnits="userSpaceOnUse">
          <stop offset={0.137} stopColor="#FFF44F" />
          <stop offset={0.48} stopColor="#FF980E" />
          <stop offset={0.592} stopColor="#FF5634" />
          <stop offset={0.655} stopColor="#FF3647" />
          <stop offset={0.904} stopColor="#E31587" />
        </radialGradient>
        <radialGradient
          id="r"
          cx={0}
          cy={0}
          r={1}
          gradientTransform="translate(939.19 239.922) scale(39.0122)"
          gradientUnits="userSpaceOnUse">
          <stop offset={0.094} stopColor="#FFF44F" />
          <stop offset={0.231} stopColor="#FFE141" />
          <stop offset={0.509} stopColor="#FFAF1E" />
          <stop offset={0.626} stopColor="#FF980E" />
        </radialGradient>
        <linearGradient
          id="d"
          x1={847.993}
          x2={878.837}
          y1={243.847}
          y2={243.847}
          gradientUnits="userSpaceOnUse">
          <stop stopColor="#D93025" />
          <stop offset={1} stopColor="#EA4335" />
        </linearGradient>
        <linearGradient
          id="e"
          x1={860.983}
          x2={876.405}
          y1={268.098}
          y2={241.387}
          gradientUnits="userSpaceOnUse">
          <stop stopColor="#FCC934" />
          <stop offset={1} stopColor="#FBBC04" />
        </linearGradient>
        <linearGradient
          id="f"
          x1={865.344}
          x2={849.922}
          y1={267.223}
          y2={240.513}
          gradientUnits="userSpaceOnUse">
          <stop stopColor="#1E8E3E" />
          <stop offset={1} stopColor="#34A853" />
        </linearGradient>
        <linearGradient
          id="h"
          x1={946.302}
          x2={915.194}
          y1={236.177}
          y2={266.191}
          gradientUnits="userSpaceOnUse">
          <stop offset={0.048} stopColor="#FFF44F" />
          <stop offset={0.111} stopColor="#FFE847" />
          <stop offset={0.225} stopColor="#FFC830" />
          <stop offset={0.368} stopColor="#FF980E" />
          <stop offset={0.401} stopColor="#FF8B16" />
          <stop offset={0.462} stopColor="#FF672A" />
          <stop offset={0.534} stopColor="#FF3647" />
          <stop offset={0.705} stopColor="#E31587" />
        </linearGradient>
        <linearGradient
          id="s"
          x1={945.928}
          x2={919.458}
          y1={236.017}
          y2={262.486}
          gradientUnits="userSpaceOnUse">
          <stop offset={0.167} stopColor="#FFF44F" stopOpacity={0.8} />
          <stop offset={0.266} stopColor="#FFF44F" stopOpacity={0.634} />
          <stop offset={0.489} stopColor="#FFF44F" stopOpacity={0.217} />
          <stop offset={0.6} stopColor="#FFF44F" stopOpacity={0} />
        </linearGradient>
        <linearGradient
          id="u"
          x1={999.416}
          x2={999.416}
          y1={268.079}
          y2={232.975}
          gradientUnits="userSpaceOnUse">
          <stop stopColor="#1E6FF1" />
          <stop offset={1} stopColor="#28CEFB" />
        </linearGradient>
        <linearGradient
          id="A"
          x1={200.265}
          x2={200.265}
          y1={192.926}
          y2={233.048}
          gradientUnits="userSpaceOnUse">
          <stop stopColor="var(--home-hero-devices-border)" />
          <stop offset={1} stopColor="var(--home-hero-devices-stop)" />
        </linearGradient>
        <pattern
          id="D"
          width={1}
          height={1}
          patternContentUnits="objectBoundingBox">
          <use xlinkHref="#E" transform="scale(.00172)" />
        </pattern>
        <image
          xlinkHref=""
          id="E"
          width={581}
          height={581}
        />
      </defs>
    </svg>
  );
}

export default Devices;
